<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据表格渲染</title>
</head>
<body>

<table border="1px" width="100%" cellspacing="0" id="user">
    <tr>
        <th>ID</th>
        <th>名字</th>
        <th>密码</th>
    </tr>
</table>


<script type="text/javascript">

    //  ajax  ->  users  $.ajax({url,data,type,dataType,success:function(res){},error})   {code,data:msg:}
    let  users = [
        {
            id:'2023112301',
            username: 'tom1',
            password: '123456'
        },
        {
            id:'2023112302',
            username: 'tom2',
            password: '123456'
        },
        {
            id:'2023112303',
            username: 'tom3',
            password: '123456'
        }
    ]

    // 获取父节点    table
    let table = document.getElementById("user");
    //  添加子节点  tr  -> table

    users.forEach(user=>{
        // 创建行节点对象   tr
        let tr = document.createElement("tr");
        for (let userKey in user) {
            // 创建td
            let td = document.createElement("td");
            td.innerText =  user[userKey]
            //  td  -> tr
            tr.appendChild(td)
        }
        // tr  ->  table
        table.appendChild(tr)
    })
</script>

</body>
</html>
